import { h } from 'vue';
import { FormSchema } from '@/components/Form/index';
import { TagEditor } from '@/components/Tag';
import { checkUserNameExists, checkEmailExists, checkPhoneNumberExists } from '@/api/identity';
import { isEmail, isMobileNumber } from '@/enums/regexEnum';
import { useI18n } from '@/hooks/web/useI18n';

const { t } = useI18n();

/** 列表项 */
export interface ListItem {
  key: string;
  title: string;
  description: string;
  extra?: string;
  avatar?: string;
  color?: string;
}

// tab的list
export const settingList = [
  {
    key: '1',
    name: t('routes.dashboard.account.setting.baseSetting.title'),
    component: 'BaseSetting',
  },
  {
    key: '2',
    name: t('routes.dashboard.account.setting.secureSetting.title'),
    component: 'SecureSetting',
  },
  {
    key: '3',
    name: t('routes.dashboard.account.setting.accountBind.title'),
    component: 'AccountBind',
  },
  {
    key: '4',
    name: t('routes.dashboard.account.setting.msgNotify.title'),
    component: 'MsgNotify',
  },
];

// 基础设置 form
export const baseSetschemas: FormSchema[] = [
  {
    field: 'UserName',
    component: 'Input',
    label: t('routes.dashboard.account.setting.baseSetting.userName'),
    colProps: {
      // span: 24,
      xs: 24, // <576px
      sm: 24, // ≥576px
      md: 24, // ≥768px
      lg: 24, // ≥992px
      xl: 20, // ≥1200px
      xxl: 12, // ≥1600px
      // xxxl: 12, // ≥2000px 3.0
    },
    rules: [
      {
        required: true,
        // @ts-ignore
        validator: async (rule, value) => {
          if (!value) {
            return Promise.reject(
              t('routes.dashboard.account.setting.baseSetting.userNamePlaceholder'),
            );
          }
          if (await checkUserNameExists(value)) {
            return Promise.reject(
              t('routes.dashboard.account.setting.baseSetting.userNameExisted'),
            );
          }
          return Promise.resolve();
        },
        trigger: 'change',
      },
    ],
  },
  {
    field: 'NickName',
    component: 'Input',
    label: t('routes.dashboard.account.setting.baseSetting.nickName'),
    colProps: {
      // span: 24,
      xs: 24, // <576px
      sm: 24, // ≥576px
      md: 24, // ≥768px
      lg: 24, // ≥992px
      xl: 20, // ≥1200px
      xxl: 12, // ≥1600px
      // xxxl: 12, // ≥2000px 3.0
    },
    required: true,
  },
  {
    field: 'Email',
    component: 'Input',
    label: t('routes.dashboard.account.setting.email'),
    dynamicDisabled: true,
    colProps: {
      // span: 24,
      xs: 24, // <576px
      sm: 24, // ≥576px
      md: 24, // ≥768px
      lg: 24, // ≥992px
      xl: 20, // ≥1200px
      xxl: 12, // ≥1600px
      // xxxl: 12, // ≥2000px 3.0
    },
    rules: [
      {
        required: false,
        // @ts-ignore
        validator: async (rule, value) => {
          if (!value) {
            return Promise.resolve();
          }
          if (!isEmail(value)) {
            return Promise.reject(t('routes.dashboard.account.setting.emailFormatError'));
          }
          if (await checkEmailExists(value)) {
            return Promise.reject(t('routes.dashboard.account.setting.emailExisted'));
          }
          return Promise.resolve();
        },
        trigger: 'change',
      },
    ],
  },
  {
    field: 'PhoneNumber',
    component: 'Input',
    label: t('routes.dashboard.account.setting.mobile'),
    dynamicDisabled: true,
    colProps: {
      // span: 24,
      xs: 24, // <576px
      sm: 24, // ≥576px
      md: 24, // ≥768px
      lg: 24, // ≥992px
      xl: 20, // ≥1200px
      xxl: 12, // ≥1600px
      // xxxl: 12, // ≥2000px 3.0
    },
    rules: [
      {
        required: false,
        // @ts-ignore
        validator: async (rule, value) => {
          if (!value) {
            return Promise.resolve();
          }
          if (!isMobileNumber(value)) {
            return Promise.reject(t('routes.dashboard.account.setting.mobileFormatError'));
          }
          if (await checkPhoneNumberExists(value)) {
            return Promise.reject(t('routes.dashboard.account.setting.mobileExisted'));
          }
          return Promise.resolve();
        },
        trigger: 'change',
      },
    ],
  },
  {
    field: 'Gender',
    component: 'RadioButtonGroup',
    label: t('routes.dashboard.account.setting.baseSetting.gender'),
    colProps: { span: 24 },
    required: true,
    componentProps: {
      options: [
        {
          label: t('enum.gender.unknown'),
          value: 0,
        },
        {
          label: t('enum.gender.male'),
          value: 1,
        },
        {
          label: t('enum.gender.female'),
          value: 2,
        },
      ],
    },
  },
  {
    field: 'Birthday',
    component: 'DatePicker',
    label: t('routes.dashboard.account.setting.baseSetting.birthday'),
    colProps: {
      // span: 24,
      xs: 24, // <576px
      sm: 24, // ≥576px
      md: 24, // ≥768px
      lg: 24, // ≥992px
      xl: 20, // ≥1200px
      xxl: 12, // ≥1600px
      // xxxl: 12, // ≥2000px 3.0
    },
    componentProps: {
      valueFormat: 'YYYY-MM-DD',
      style: { width: '100%' },
    },
  },
  {
    field: 'BloodType',
    component: 'Input',
    label: t('routes.dashboard.account.setting.baseSetting.bloodType'),
    colProps: {
      // span: 24,
      xs: 24, // <576px
      sm: 24, // ≥576px
      md: 24, // ≥768px
      lg: 24, // ≥992px
      xl: 20, // ≥1200px
      xxl: 12, // ≥1600px
      // xxxl: 12, // ≥2000px 3.0
    },
  },
  {
    field: 'Tag',
    // component: 'Input',
    label: t('routes.dashboard.account.setting.baseSetting.tag'),
    slot: 'tagSlot',
    colProps: { span: 24 },
  },
  {
    field: 'Title',
    component: 'Input',
    label: t('routes.dashboard.account.setting.baseSetting.userTitle'),
    colProps: { span: 24 },
    render: ({ model, field }) => {
      return h(TagEditor, {
        value: model[field],
        omitLength: 15,
        addTagText: t('routes.dashboard.account.setting.baseSetting.addUserTitle'),
        onChange: (tags: string[]) => {
          model[field] = tags;
        },
      });
    },
  },
  {
    field: 'Address',
    component: 'InputTextArea',
    label: t('routes.dashboard.account.setting.baseSetting.address'),
    colProps: { span: 24 },
  },
  {
    field: 'Profile',
    component: 'InputTextArea',
    label: t('routes.dashboard.account.setting.baseSetting.profile'),
    colProps: { span: 24 },
  },
  {
    field: 'Sign',
    component: 'InputTextArea',
    label: t('routes.dashboard.account.setting.baseSetting.sign'),
    colProps: { span: 24 },
  },
  {
    field: 'Remark',
    component: 'InputTextArea',
    label: t('routes.dashboard.account.setting.baseSetting.remark'),
    colProps: { span: 24 },
  },
  {
    field: 'HomePath',
    component: 'InputTextArea',
    label: t('routes.dashboard.account.setting.baseSetting.homePath'),
    colProps: { span: 24 },
  },
];

// 安全设置
// 账号绑定
// 新消息通知
